<template>
    <div
        id="home"
        class="carousel banner">
        <div class="carousel-inner">
            <!-- <div class="mask"></div> -->
            <div class="carousel-inner-content">
                <div class="content-wrapper">
                    <h1 class="main-title">The Necessity of Decentralized Governance</h1>
                    <p class="description">
                        The core spirit of Web3 is decentralization, but in reality, most projects remain in a "pseudo-decentralized" state, with governance power overly concentrated in the hands of founding teams and early capital.
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
    // import './styles/banner.scss';
</script>

<style lang="scss" scoped>
    a {
        color: #fff;
        text-decoration: none;
    }
    .banner {
        overflow: hidden;
        // margin-top: -140px;
    }
    .carousel-inner,
    .carousel-item,
    .carousel-item img {
        width: 100%;
    }
    .carousel-inner {
        height: pxToRem(1080);
        background: url('/newHome/ecology-technology-banner.png');
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
        .mask {
            opacity: 0.5;
            // background: #000;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0px;
        }
        img {
            position: relative;
        }
        .carousel-inner-content {
            width: pxToRem(1159);
            margin: 0 auto;
            position: relative;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

            .content-wrapper {
                max-width: pxToRem(923);
                text-align: center;

                .main-title {
                    font-family: 'Figtree', sans-serif;
                    font-weight: 900;
                    font-size: pxToRem(60);
                    line-height: 1.2em;
                    color: rgba(255, 255, 255, 0.9);
                    margin-bottom: pxToRem(20);
                    margin: 0;
                }

                .description {
                    font-family: 'Figtree', sans-serif;
                    font-weight: 500;
                    font-size: pxToRem(30);
                    line-height: 1.2em;
                    color: rgba(255, 255, 255, 0.9);
                    margin: pxToRem(20) 0 0 0;
                    max-width: pxToRem(926);
                }
            }
        }
        .text {
            width: pxToRem(541);
            font-size: pxToRem(48);
            color: #000;
            text-align: left;
            position: absolute;
            left: 0;
            // margin-left: pxToRem(-590);
            top: pxToRem(426);
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            @extend .custom-font-black;
        }
        .btn {
            width: pxToRem(186);
            height: pxToRem(72);
            position: absolute;
            // left: 50%;
            background: #e27049;
            color: #fff;
            border-radius: pxToRem(63);
            top: pxToRem(646);
            // margin-left: pxToRem(-550);
            font-size: pxToRem(24);
            font-weight: 590;
            line-height: pxToRem(24);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        .right {
            position: absolute;
            top: pxToRem(127);
            right: 0;
        }
    }
    .carousel-item img {
        object-fit: cover;
    }
    @media (max-width: 768px) {
        .banner {
            // margin-top: pxToRem75(70);
        }
        .carousel-inner {
            height: pxToRem75(472);
            width: pxToRem75(750);
            .carousel-inner-content {
                width: pxToRem75(615);

                .content-wrapper {
                    .main-title {
                        font-size: pxToRem75(32);
                        line-height: 1.2em;
                        margin-bottom: pxToRem75(16);
                    }

                    .description {
                        font-size: pxToRem75(18);
                        line-height: 1.4em;
                        margin-top: pxToRem75(16);
                    }
                }
            }
            .text {
                font-size: pxToRem75(30);
                line-height: pxToRem75(35.8);
                margin: 0 auto;
                width: pxToRem75(307);
                height: auto;
                margin-left: pxToRem75(0);
                top: pxToRem75(128);
            }
            .btn {
                width: pxToRem75(174);
                height: pxToRem75(64);
                top: pxToRem75(276);
                font-size: pxToRem75(24);
                line-height: pxToRem75(24);
            }
            .right {
                top: 0;
                right: 0;
                img {
                    width: pxToRem75(310);
                }
            }
        }
    }
    // @media (max-width: 500px) {
    //     .carousel-inner {
    //         .text {
    //             width: calc(340px * 2);
    //             margin-left: calc(-1 * 340px * 2 / 2);
    //             font-size: pxToRem75(42);
    //             line-height: pxToRem75(50);
    //         }
    //     }
    // }
</style>
